import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:toolbox/common/common.dart';
import 'package:toolbox/common/sizeConfig.dart';
import 'package:toolbox/models/TranslateModel.dart';
import 'package:toolbox/widgets/buttons.dart';
import 'package:toolbox/widgets/defaultFormField.dart';

import 'translate_logic.dart';

class TranslatePage extends StatelessWidget {
  TranslatePage({super.key});

  final logic = Get.put(TranslateLogic());
  final state = Get.find<TranslateLogic>().state;

  @override
  Widget build(BuildContext context) {
    SizeConfig.init(context);
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          height: SizeConfig.screenHeight,
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  selectLanguages(state.fromController, logic.onFromSelected),
                  IconButton(
                    onPressed: logic.swap,
                    icon: const Icon(Icons.swap_horiz),
                  ),
                  selectLanguages(state.toController, logic.onToSelected),
                ],
              ),
              const SizedBox(height: 10),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                child: DefaultFormField(
                  textEditingController: state.controller,
                  focusNode: state.focusNode,
                  hintText: '输入要翻译的单词或句子',
                  maxLines: 5,
                  suffixIcon: IconButton(
                    onPressed: logic.onTapDeleteInput,
                    icon: const Icon(Icons.close),
                  ),
                ),
              ),
              const SizedBox(height: 10),
              Obx(() {
                return GestureDetector(
                  onTap: logic.onTapCopy,
                  child: Text(
                    state.result.value,
                    style: Styles.textStyle(size: 26),
                  ),
                );
              }),
              GetBuilder<TranslateLogic>(
                id: state.getBuilderIdLanguagesTip,
                builder: (logic) {
                  if (!state.showLanguagesTip) return Container();
                  return Padding(
                    padding: const EdgeInsets.only(top: 8),
                    child: Text(
                      '(${state.autoFrom.value}->${state.autoTo.value})',
                      style: Styles.textStyle(size: 14),
                    ),
                  );
                },
              ),
              const SizedBox(height: 10),
              MainButton(
                text: Strings.translation,
                icon: const Icon(Icons.translate),
                onTap: logic.translate,
              ),
              Align(
                alignment: Alignment.centerRight,
                child: clearHistoryButton(),
              ),
              Expanded(
                  child: Obx(() => ListView(
                        children: [
                          ...List.generate(state.history.length,
                              (index) => historyWidget(state.history[index]))
                        ],
                      ))),
            ],
          ),
        ),
      ),
    );
  }

  Widget selectLanguages(
    TextEditingController controller,
    Function(Languages?) func,
  ) {
    double maxWidth = (SizeConfig.screenWidth - 48 - 20 - 20) / 2;
    return DropdownMenu(
      menuHeight: 400,
      width: maxWidth,
      dropdownMenuEntries: _buildDropdownMenuEntries(),
      initialSelection: Languages.auto,
      onSelected: func,
      controller: controller,
    );
  }

  List<DropdownMenuEntry<Languages>> _buildDropdownMenuEntries() {
    return Languages.values
        .map((e) => DropdownMenuEntry(value: e, label: e.zhName))
        .toList();
  }

  Widget clearHistoryButton() {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          onPressed: logic.onTapCopy,
          icon: const Icon(Icons.copy),
        ),
        IconButton(
          onPressed: logic.onTapClearHistory,
          icon: const Icon(Icons.cleaning_services),
        ),
      ],
    );
  }

  Widget historyWidget(TranslateModel model) {
    return GestureDetector(
      onTap: () => logic.onTapHistory(model),
      child: Container(
        height: 40,
        margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        padding: const EdgeInsets.symmetric(horizontal: 10),
        decoration: BoxDecoration(
          color: Colors.blue.withOpacity(0.1),
          borderRadius: const BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
              offset: const Offset(0, 1),
              color: Colors.black.withOpacity(0.1),
              blurRadius: 4,
            ),
          ],
        ),
        child: Row(
          children: [
            Expanded(
              child: Row(
                children: [
                  Expanded(
                    child: Text(
                      model.query ?? '',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ],
              ),
            ),
            Text('${model.from}->${model.to} ${model.count}次'),
          ],
        ),
      ),
    );
  }
}
